<template>
  <div>
    <div class="form-edit-btns">
      <el-button type="primary" size="mini" icon="el-icon-plus"
                 @click="showAddView">
        添加学校
      </el-button>
    </div>
    <el-main style="padding-left: 0px;padding-top: 0px">
      <div class="table-box">
        <el-table
          :data="objs"
          v-loading="tableLoading"
          border
          stripe
          @selection-change="handleSelectionChange"
          size="mini"
          style="width: 100%">
          <el-table-column
            type="selection"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
          >
          </el-table-column>


          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditView(scope.row)" type="text"
                         size="mini">编辑
              </el-button>
              <el-button type="text" size="mini"
                         @click="deleteObj(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :page-size="10"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount">
        </el-pagination>
        <div class="form-edit-btns" style="float:right">
          <el-button type="danger" size="mini" v-if="objs.length>0" :disabled="multipleSelection.length==0"
                     @click="deleteMany">批量删除
          </el-button>
        </div>
      </div>
    </el-main>

    <el-form :model="obj" :rules="rules" ref="addForm" style="margin: 0px;padding: 0px;">
      <div style="text-align: left">
        <el-dialog
          :title="dialogTitle"
          style="padding: 0px;"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="77%">
          <el-row>
            <el-form-item label="名称:" prop="name">
              <el-input prefix-icon="el-icon-edit" v-model="obj.name" size="mini"
                        placeholder="请输入名称"></el-input>
            </el-form-item>

          </el-row>

          <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="cancelEidt">取 消</el-button>
    <el-button size="mini" type="primary" @click="add('addForm')">确 定</el-button>
  </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
	export default {
		data() {
			return {
				objs: [],
				dialogTitle: '',
				multipleSelection: [],
				totalCount: -1,
				currentPage: 1,
				dialogVisible: false,
				tableLoading: false,
				obj: {
					name: ''
				},
				rules: {
					name: [{required: true, message: '必填:名称', trigger: 'blur'}]
				}
			};
		},
		mounted: function () {
			this.loadObjs();
		},
		methods: {


			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			deleteMany(){
				this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var ids = '';
					for (var i = 0; i < this.multipleSelection.length; i++) {
						ids += this.multipleSelection[i].id + ",";
					}
					this.doDelete(ids);
				}).catch(() => {
				});
			},
			deleteObj(row){
				this.$confirm('此操作将永久删除[' + row.name + '], 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.doDelete(row.id);
				}).catch(() => {
				});
			},
			doDelete(ids){
				this.tableLoading = true;
				var _this = this;
				this.deleteRequest("/school/list/delete/" + ids).then(resp=> {
					_this.tableLoading = false;
					if (resp && resp.status == 200) {
						var data = resp.data;
						_this.$message({type: data.status, message: data.msg});
						_this.loadObjs();
					}
				})
			},


			currentChange(currentChange){
				this.currentPage = currentChange;
				this.loadObjs();
			},
			loadObjs(){
				var _this = this;
				this.tableLoading = true;
				this.getRequest("/school/list/list?page=" + this.currentPage + "&size=10").then(resp=> {
					this.tableLoading = false;
					if (resp && resp.status == 200) {
						var data = resp.data;
						_this.objs = data.data.arrays;
						_this.totalCount = data.data.count;
					}
				})
			},
			add(formName){
				var _this = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.obj.id) {
							//更新
							this.tableLoading = true;
							this.postRequest("/school/list/update", this.obj).then(resp=> {
								_this.tableLoading = false;
								if (resp && resp.status == 200) {
									var data = resp.data;
									_this.$message({type: data.status, message: data.msg});
									_this.dialogVisible = false;
									_this.emptyObjData();
									_this.loadObjs();
								}
							})
						} else {
							//添加
							this.tableLoading = true;
							this.postRequest("/school/list/add", this.obj).then(resp=> {
								_this.tableLoading = false;
								if (resp && resp.status == 200) {
									var data = resp.data;
									_this.$message({type: data.status, message: data.msg});
									_this.dialogVisible = false;
									_this.emptyObjData();
									_this.loadObjs();
								}
							})
						}
					} else {
						return false;
					}
				});
			},
			cancelEidt(){
				this.dialogVisible = false;
				this.emptyObjData();
			},
			showEditView(row){
				//console.log(row)
				this.dialogTitle = "编辑学校";
				this.obj.name = row.name;
				this.obj.id = row.id;
				this.dialogVisible = true;
			},
			showAddView(){
				this.dialogTitle = "添加学校";
				this.dialogVisible = true;
				var _this = this;
			},
			emptyObjData(){
				this.obj = {
					name: '',
				}
			}
		}
	};
</script>
<style scoped>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
